<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Dialogs in Ruby GTK</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, Ruby, dialogs, GTK, programming, Linux">
<meta name="description" content="This part of the Ruby GTK tutorial is
dedicated to dialogs.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container2">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


<div class="content2">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Dialogs</h1>


<p>
In this part of the Ruby GTK programming tutorial, we will introduce dialogs. 
</p>

<div class="big_hor">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* big_horizontal */
google_ad_slot = "2904953388";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
Dialog windows or dialogs are an indispensable part of most modern GUI applications.
A dialog is defined as a conversation between two or more persons. In a computer
application a dialog is a window which is used to "talk" to the application.
A dialog is used to input data, modify data, change the application settings etc.
Dialogs are important means of communication between a user and a computer program.
</p>


<h2>Message boxes</h2>

<p>
Message dialogs are convenient dialogs that provide messages to the user of the application.
The message consists of textual and image data. 
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby GTK tutorial
#
# This example shows message
# dialogs
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009

require 'gtk2'


class RubyApp &lt; Gtk::Window

    def initialize
        super
    
        set_title "Messages"
        signal_connect "destroy" do 
            Gtk.main_quit 
        end
        
        init_ui

        set_default_size 250, 100
        set_window_position Gtk::Window::POS_CENTER
        
        show_all
    end
    
    def init_ui
    
        table = Gtk::Table.new 2, 2, true
        
        info = Gtk::Button.new "Information"
        warn = Gtk::Button.new "Warning"
        ques = Gtk::Button.new "Question"
        erro = Gtk::Button.new "Error" 

        info.signal_connect "clicked" do
            on_info
        end    
        
        warn.signal_connect "clicked" do
            on_warn
        end
        
        ques.signal_connect "clicked" do
            on_ques
        end
        
        erro.signal_connect "clicked" do
            on_erro
        end
        
        table.attach info, 0, 1, 0, 1
        table.attach warn, 1, 2, 0, 1
        table.attach ques, 0, 1, 1, 2
        table.attach erro, 1, 2, 1, 2
        
        add table

    end
    
    def on_info
        md = Gtk::MessageDialog.new(self,
            Gtk::Dialog::DESTROY_WITH_PARENT, Gtk::MessageDialog::INFO, 
            Gtk::MessageDialog::BUTTONS_CLOSE, "Download completed")
        md.run
        md.destroy
    end
        
    
    def on_erro
        md = Gtk::MessageDialog.new(self, Gtk::Dialog::MODAL |
            Gtk::Dialog::DESTROY_WITH_PARENT, Gtk::MessageDialog::ERROR, 
            Gtk::MessageDialog::BUTTONS_CLOSE, "Error loading file")
        md.run
        md.destroy
    end
    
    
    def on_ques
        md = Gtk::MessageDialog.new(self,
            Gtk::Dialog::DESTROY_WITH_PARENT, Gtk::MessageDialog::QUESTION, 
            Gtk::MessageDialog::BUTTONS_CLOSE, "Are you sure to quit?")
        md.run
        md.destroy
    end
    
    def on_warn
        md = Gtk::MessageDialog.new(self,
            Gtk::Dialog::DESTROY_WITH_PARENT, Gtk::MessageDialog::WARNING, 
            Gtk::MessageDialog::BUTTONS_CLOSE, "Unallowed operation")
        md.run
        md.destroy
    end
end

Gtk.init
    window = RubyApp.new
Gtk.main
</pre>

<p>
In our example, we will show four kinds of message dialogs. Information, Warning, 
Question and Error message dialogs.
</p>

<pre class="explanation">
info = Gtk::Button.new "Information"
warn = Gtk::Button.new "Warning"
ques = Gtk::Button.new "Question"
erro = Gtk::Button.new "Error" 
</pre>

<p>
We have four buttons. Each of these buttons will show a different kind of message dialog. 
</p>

<pre class="explanation">
def on_info
    md = Gtk::MessageDialog.new(self,
        Gtk::Dialog::DESTROY_WITH_PARENT, Gtk::MessageDialog::INFO, 
        Gtk::MessageDialog::BUTTONS_CLOSE, "Download completed")
    md.run
    md.destroy
end
</pre>

<p>
If we click on the info button, the Information dialog is displayed. 
The <code>Gtk::MessageDialog::INFO</code> specifies the type of the
dialog. The <code>Gtk::MessageDialog::BUTTONS_CLOSE</code> specifies the button to 
be displayed in the dialog. The last parameter is the message dislayed. 
The dialog is displayed with the <code>run</code> method. 
The programmer must also call either the <code>destroy</code> or the 
<code>hide</code> method.
</p>


<img src="/img/gui/rubygtk/information.png" alt="Information message dialog">&nbsp;&nbsp;
<img src="/img/gui/rubygtk/warning.png" alt="Warning message dialog">&nbsp;&nbsp;
<img src="/img/gui/rubygtk/question.png" alt="Question message dialog">&nbsp;&nbsp;
<img src="/img/gui/rubygtk/error.png" alt="Error message dialog">
<br>



<h2>AboutDialog</h2>

<p>
The <code>AboutDialog</code> displays information about the application. 
<code>AboutDialog</code>
can display a logo, the name of the application, version, copyright, website or licence information. 
It is also possible to give credits to the authors, documenters, translators and artists.
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby GTK tutorial
#
# This example demonstrates the
# AboutDialog dialog
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009

require 'gtk2'


class RubyApp &lt; Gtk::Window

    def initialize
        super
    
        set_title "About dialog"
        signal_connect "destroy" do 
            Gtk.main_quit 
        end
        
        init_ui

        set_default_size 300, 150
        set_window_position Gtk::Window::POS_CENTER
        
        show_all
    end
    
    def init_ui
    
        button = Gtk::Button.new "About"
        button.set_size_request 80, 30
        
        button.signal_connect "clicked" do
            on_clicked
        end
        
        fix = Gtk::Fixed.new
        fix.put button, 20, 20
   
        add fix

    end
    
    def on_clicked
        about = Gtk::AboutDialog.new
        about.set_program_name "Battery"
        about.set_version "0.1"
        about.set_copyright "(c) Jan Bodnar"
        about.set_comments "Battery is a simple tool for battery checking"
        about.set_website "http://www.zetcode.com"
        about.set_logo Gdk::Pixbuf.new "battery.png"
        about.run
        about.destroy
    end
end

Gtk.init
    window = RubyApp.new
Gtk.main
</pre>

<p>
The code example uses a <code>AboutDialog</code> with some of its features. 
</p>

<pre class="explanation">
about = Gtk::AboutDialog.new
</pre>

<p>
We create an <code>AboutDialog</code>. 
</p>

<pre class="explanation">
about.set_program_name "Battery"
about.set_version "0.1"
about.set_copyright "(c) Jan Bodnar"
</pre>

<p>
Here we specify the name, the version and the copyright.
</p>

<pre class="explanation">
about.set_logo Gdk::Pixbuf.new "battery.png"
</pre>

<p>
This line creates a logo. 
</p>

<img src="/img/gui/rubygtk/about.png" alt="AboutDialog">
<div class="figure">Figure: AboutDialog</div>


<h2>FontSelectionDialog</h2>

<p>
The <code>FontSelectionDialog</code> is a dialog for selecting fonts. 
It is typically used in applications, that do some text editing or formatting. 
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby GTK tutorial
#
# This example works with the
# FontSelectionDialog
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009

require 'gtk2'


class RubyApp &lt; Gtk::Window

    def initialize
        super
    
        set_title "FontSelectionDialog"
        signal_connect "destroy" do 
            Gtk.main_quit 
        end
        
        init_ui

        set_default_size 300, 150
        set_window_position Gtk::Window::POS_CENTER
        
        show_all
    end
    
    def init_ui
    
        set_border_width 10
        @label = Gtk::Label.new "The only victory over love is flight."
        button = Gtk::Button.new "Select font"
        
        button.signal_connect "clicked" do
            on_clicked
        end

        fix = Gtk::Fixed.new
        fix.put button, 100, 30
        fix.put @label, 30, 90
        add fix

    end
    
    def on_clicked
        fdia = Gtk::FontSelectionDialog.new "Select font name"
        response = fdia.run
              
        if response == Gtk::Dialog::RESPONSE_OK
            font_desc = Pango::FontDescription.new fdia.font_name
            if font_desc
                @label.modify_font font_desc
            end
        end
        fdia.destroy
    end     
end

Gtk.init
    window = RubyApp.new
Gtk.main
</pre>

<p>
In the code example, we have a button and a label. We show the 
<code>FontSelectionDialog</code> by clicking on the button.
</p>

<pre class="explanation">
fdia = Gtk::FontSelectionDialog.new "Select font name"
</pre>

<p>
We create the <code>FontSelectionDialog</code>.
</p>

<pre class="explanation">
if response == Gtk::Dialog::RESPONSE_OK
    font_desc = Pango::FontDescription.new fdia.font_name
    if font_desc
        @label.modify_font font_desc
    end
end 
</pre>

<p>
If we click on the OK button, the font of the label widget changes to the
one, that we selected in the dialog. 
</p>

<img src="/img/gui/rubygtk/fontdialog.png" alt="FontSelectionDialog">
<div class="figure">Figure: FontSelectionDialog </div>


<h2>ColorSelectionDialog</h2>

<p>
<code>ColorSelectionDialog</code> is a dialog for selecting a color. 
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby GTK tutorial
#
# This example works with the
# ColorSelectionDialog
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009

require 'gtk2'


class RubyApp &lt; Gtk::Window

    def initialize
        super
    
        set_title "ColorSelectionDialog"
        signal_connect "destroy" do 
            Gtk.main_quit 
        end
        
        init_ui

        set_default_size 350, 150
        set_window_position Gtk::Window::POS_CENTER
        
        show_all
    end
    
    def init_ui
    
        set_border_width 10
        @label = Gtk::Label.new "The only victory over love is flight."
        button = Gtk::Button.new "Select color"
        
        button.signal_connect "clicked" do
            on_clicked
        end

        fix = Gtk::Fixed.new
        fix.put button, 100, 30
        fix.put @label, 30, 90
        add fix
    end
    
    def on_clicked
        cdia = Gtk::ColorSelectionDialog.new "Select color"
        response = cdia.run
              
        if response == Gtk::Dialog::RESPONSE_OK
            colorsel = cdia.colorsel
            color = colorsel.current_color
            @label.modify_fg Gtk::STATE_NORMAL, color
        end
        
        cdia.destroy
    end
end

Gtk.init
    window = RubyApp.new
Gtk.main
</pre>

<p>
The example is very similar to the previous one. This time we change the color of the label. 
</p>

<pre class="explanation">
cdia = Gtk::ColorSelectionDialog.new "Select color"
</pre>

<p>
We create the <code>ColorSelectionDialog</code>.
</p>

<pre class="explanation">
if response == Gtk::Dialog::RESPONSE_OK
    colorsel = cdia.colorsel
    color = colorsel.current_color
    @label.modify_fg Gtk::STATE_NORMAL, color
end
</pre>

<p>
If the user pressed OK, we get the color value and modify the label's color. 
</p>

<img src="/img/gui/rubygtk/colordialog.png" alt="ColorSelectionDialog">
<div class="figure">Figure: ColorSelectionDialog </div>

<p>
In this part of the Ruby GTK tutorial, we presented dialogs. 
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified June 26, 2009  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

